<script setup>
import * as echarts from 'echarts/core';
import { defineProps } from 'vue';
import echart from '../echart.vue';
const props = defineProps({
    value: {
        type: Number,
        default: 0
    },

})

const pieOption = {
    title: [
        {
            text: "室内温度",
            x: "47%",
            y: "30%",
            textAlign: "center",
            textStyle: {
                fontSize: "13",
                fontWeight: "500",
                color: "#2bafa2",
                textAlign: "center",
                textShadowBlur: "1",
            },
        },
        {
            text: `${props.value.toFixed(1)}%`,
            left: "47%",
            top: "45%",
            textAlign: "center",
            textStyle: {
                fontSize: "14",
                color: "#2bafa2",
                textShadowBlur: "1",
            },
        },
    ],
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '100%'],
            center: ['50%', '40%'],
            // 鼠标悬停时不要反应
            hoverAnimation: false,
            // adjust the start and end angle
            startAngle: 30,
            endAngle: 150,
            legendHoverLink: false, // 防止鼠标悬停时显示图例
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        { offset: 0, color: '#2b5979' },
                        { offset: 1, color: '#2ae6cf' }
                    ]
                )
            },
            data: [
                { value: 100, name: '室内温度' },
            ],
            label: {
                show: false // 不显示标签
            },
        }
    ]
};

</script>
<template>
    <echart :option="pieOption"></echart>
</template>
<style scoped></style>